<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码页面</title>
</head>
<body>
    <div style="margin-bottom: 20px;">
        <span>请输入用户名或手机号：</span><input type="text" name="studentNameOrPhone" id="studentNameOrPhone">
        <input type="button" value="提交" id="queryBtn">
    </div>

    <!-- 错误提示，正确显示以下密保问题 -->
    <div id="securityQuestion" style="display: none;margin-bottom: 20px;">
        <div style="margin-bottom: 20px;">
            <span style="margin: 45px;">密保问题：</span>
            <select id="question" name="question">

            </select>
        </div>
        <div style="margin-bottom: 20px;">
            <span style="margin: 63px;">答案：</span><input type="text" id="answer" name="answer">
            <button id="answerBtn">提交</button>
        </div>
        <!-- 定义隐藏域，存放id信息，方便查询密保是否正确 -->
        <!-- 使用ajax -->
        <div style="margin-bottom: 20px;"></div>
    </div>

</body>
</html>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        var stuId;
        var stuName;
        // 1. 验证用户名或电话号码是否正确
        $("#queryBtn").click(function () {
            var studentNameOrPhone = $("#studentNameOrPhone").val();
            $.ajax({
                method:"post",
                url:"student?action=querySecurityQuestion",
                data:{"studentNameOrPhone":studentNameOrPhone},
                type:"json",
                success:function (result) {
                    if(result.code != 10001) {
                        alert(result.msg);
                        return;
                    }
                    stuId = result.stuId;
                    $("#securityQuestion").css("display","");
                    var questions = result.questions;
                    stuName = result.stuName;
                    for(var i = 0;i<questions.length;i++){
                        $("#question").append("<option value='"+ i +"'>" + questions[i] +"</option>");
                    }
                }
            })
        })

        // 2. 验证密保问题答案是否正确
        $("#answerBtn").click(function () {
            // 获取信息
            var data = {
                "stuId":stuId,
                "question": $("#question option:selected").text(),
                "answer":$("#answer").val()
            };

            $.ajax({
                method:"post",
                url:"student?action=checkSecurityQuestion",
                data:data,
                type:"json",
                success:function (result){
                    //如果验证成功，则提示密码问题回答正确，并跳转到修改密码的界面，否则让其重新输入
                    if ( result.code == 30001){
                        alert(result.msg);
                        location.href = "change-password.html?stuName="+stuName;
                    }else {
                        alert(result.msg);
                    }
                }
            });

        })
    })
</script>